<template>
  <div class="resume_detail">
    <el-dialog
      :title="dialogTitle"
      customClass="mes_dialog"
      width="60%"
      v-dialogDrag
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      @closed="closeDialog">
      <el-tabs
        class="mes_tabs"
        :class="{ 'no_header': !isDoubleTab }"
        v-model="activeTabs"
        type="border-card"
        v-loading="isLoading">
        <el-tab-pane name="first">
          <span slot="label">{{this.currentItem.productTraceTypeValue === 'TurnoverAssign' ? '要料基础信息' : '入库基础信息'}}</span>
          <info-grid
            style-type="grey"
            :row-size="2"
            :items="gridItems"
            :infoData="gridData"
          ></info-grid>
        </el-tab-pane>
        <el-tab-pane name="second">
          <span slot="label">{{this.currentItem.productTraceTypeValue === 'TurnoverAssign' ? '要料明细' : '入库明细'}}</span>
          <div class="table_container tab_table_top">
            <el-table
              ref="tableNode"
              :data="tableData"
              border
              stripe
              max-height="250px"
              v-loading="isLoading"
              style="width: 100%">
              <mes-col-comp
                :key="index"
                v-for="(column, index) in columnList"
                :column="column">
              </mes-col-comp>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="mes_btn">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import gridDetailList from './gridDetailList'
import materialDetailCols from './materialDetailCols'
import storageDetailCols from './storageDetailCols'
import traceMapping from './traceMapping'
export default {
  name: 'ResumeDetail',
  data() {
    return {
      dialogVisible: false,
      activeTabs: 'first',
      dialogTitle: '', // 弹框标题
      isLoading: false, // 是否加载
      gridData: {}, // 当前栅格数据
      tableData: [], // 当前表格数据
      currentItem: {}, // 当前卡片数据
      gridItems: [], // 栅格字段列表
      resumeType: '', // 履历追溯类型
      postGridVal: '', // 栅格请求值
      postTableVal: '', // 表格请值
      materialRequestId: '', // 要料申请ID
    }
  },
  computed: {
    // 是否包含两个tab
    isDoubleTab() {
      if (Object.keys(this.currentItem).length) {
        return this.currentItem.productTraceTypeValue === 'TurnoverAssign' || this.currentItem.productTraceTypeValue === 'TurnoverStore'
      } else {
        return false
      }
    },
    // 表格列(要料明细/入库明细)
    columnList() {
      if (Object.keys(this.currentItem).length) {
        if (this.currentItem.productTraceTypeValue === 'TurnoverAssign') return materialDetailCols
        if (this.currentItem.productTraceTypeValue === 'TurnoverStore') return storageDetailCols
      }
    }
  },
  methods: {
    openDialog(item) {
      this.currentItem = item
      this.dialogVisible = true
      this.dialogTitle = item.title
      this.gridItems = gridDetailList[item.productTraceTypeValue] || []
      this.resumeType = this.currentItem.productTraceTypeValue
      this.postGridVal = this.currentItem.storeMaterialId || this.currentItem.workstageId || this.currentItem.turnoverId
      this.postTableVal = this.currentItem.storeMaterialId || this.currentItem.turnoverNumber
      this.getTableData()
    },
    // 获取grid数据
    getGridData() {
      const mapping = traceMapping[this.resumeType]
      let query = {
        columns: mapping.columns || undefined,
        viewSource: mapping.viewSource || undefined
      }
      query[mapping.key] = this.postGridVal
      this.isLoading = true
      return this.$store.dispatch('saveData', {
        method: 'post',
        url: mapping.url,
        data: {
          pageSize: 1,
          pageNo: 1,
          query: query
        },
        noCommit: true
      }).then((res) => {
        this.gridData = res.data.list[0] || {}
        Object.assign(this.gridData, this.currentItem)
        if (this.currentItem.productTraceTypeValue === 'TurnoverAssign') {
          this.materialRequestId = this.gridData.id
        }
      })
    },
    // 获取(要料明细/入库明细)表格数据
    async getTableData() {
      await this.getGridData()
      let mapping = {}
      let query = {}
      // 要料申请
      if (this.resumeType === 'TurnoverAssign') {
        mapping.url = 'a/materialrequestinventory/materialRequestInventory/list'
        mapping.key = 'turnoverNumbers'
        query.materialRequestId = this.materialRequestId
        query.viewSource = 4
        // 完工入库
      } else if (this.resumeType === 'TurnoverStore') {
        mapping.url = 'a/materialstoreinventory/materialStoreInventory/list'
        mapping.key = 'storeMaterialId'
        query[mapping.key] = this.postTableVal
        query.viewSource = 4
      } else {
        this.isLoading = false
        return false
      }
      this.$store.dispatch('saveData', {
        method: 'post',
        url: mapping.url,
        data: {
          pageNo: 1,
          pageSize: 1000,
          query: query
        },
        noCommit: true
      }).then((res) => {
        this.tableData = res.data.list || []
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 弹窗关闭
    closeDialog() {
      this.currentItem = {}
      this.activeTabs = 'first'
      this.tableData = []
    }
  }
}
</script>

<style lang="less" scoped>
  .resume_detail {
    .info_grid{
      margin-top: 20px;
    }
  }
</style>

<style lang="less">
  .mes_tabs {
    &.no_header {
      .el-tabs__header {
        display: none;
      }
      .info_grid{
        margin-top: 0!important;
      }
    }
    .tab_table_top{
      margin-top: 20px;
    }
  }
</style>
